<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>函数</title>
</head>

<body>
    <select id="dropdown" onchange="handleSelection(this)">
        <option value="天神">选项 1</option>
        <option value="平民">选项 2</option>
        <option value="狼人">选项 3</option>
    </select>

    <script>
        // 处理下拉列表变化的函数
        const handleSelection=(select) => {
            console.log("1、你选择的阵营是" + select.value);
        };

        // 对dom元素动态设置属性
        var dp = document.getElementById('dropdown');
        dp.oninput = () => {
            console.log("2、你选择的阵营是" + dp.value);
        };

        // 对dom元素添加监听事件
        document.getElementById('dropdown').addEventListener('input', () => {
            console.log("3、你选择的阵营是" + document.getElementById('dropdown').value);
        });

    </script>
</body>

</html>